<template>
  <div id="app">
    <div class="head">
      <div id="logo" :class="{'collapseMain':isCollapse}"></div>
      <div id="headPanel" :class="{'collapseMain':isCollapse}">
        <div class="fl collapse" @click="changeIsCollapse"> <i :class="collClass"></i></div>
        <div style="float:left;">
          <span style="display:block;font-size:22px">{{$t('label.sysName')}}</span>
        </div>
        <div style="float:right">
          <span style="font-size:14px">{{getUserInfo().name}}</span>
          <el-button size="mini" type="text" @click="showUpdatePwd" circle>{{ $t('btnText.updatePwdBtnText') }}</el-button>

          <el-button size="mini" type="text" @click="logoff" circle>{{ $t('btnText.logoffBtnText') }}</el-button>
        </div>
      </div>
    </div>
    <div class="container">
      <div id="navPanel" :class="{'collapseMain':isCollapse}">
        <div id="menuPanel">
          <el-menu :collapse="isCollapse" class="el-menu-vertical" text-color="#000000" active-text-color="#000000" @select="onMenuSelect" style="height:100%;float:left;">
            <!-- <el-menu-item index="mainPage">
              <i style="font-size:12px;color:#eee;" :class="mainPageIcon"></i>
              <span style="font-size:12px" slot="title">{{$t('label.mainPage')}}</span>
            </el-menu-item> -->
            <sys-menu :menus="rootMenu"></sys-menu>
          </el-menu>
        </div>
      </div>
      <div id="mainPanel" :class="{'collapseMain':isCollapse}">

        <div id="tabPanel" ref="tabItemPanel">
          <div class="panel-close" v-if="tabItems[0]" @click="closePanel">
            <i class="fa fa-close"></i>
          </div>
          <el-tabs class='main-tabs' ref="eltabs" type="card" tabPosition="top" v-model="selectTabName" @tab-remove="removeTab" :closable="true" small="true" style="width:100%;height:100%">
            <el-tab-pane v-for="item in tabItems" :key="item.menuCode" :label="item.menuName" :name="item.menuCode">
              <component v-bind:is="item.component" :menuCode="item.menuCode" :ref="item.menuCode">
              </component>
            </el-tab-pane>
          </el-tabs>

        </div>
      </div>
    </div>

    <!--修改密码对话框-->
    <el-dialog :title="$t('label.updatePwdTitle')" @close="closeDialog" :visible.sync="isShowUpdatePwd" top="5vh" width="40%" :close-on-click-modal="false">
      <el-form :model="editForm" ref="editForm" size="mini" :rules="editRules" :label-position="editFormPosition" status-icon=status-icon>
        <el-form-item :label="$t('label.oldPwd')" :label-width="editPwdLabelWidth" prop="passWord">
          <el-input v-model.trim="editForm.passWord" type="password" maxlength="200" :placeholder="$t('label.placeholderOldPwd')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('label.newPwd')" :label-width="editPwdLabelWidth" prop="newPwd">
          <el-input v-model.trim="editForm.newPwd" type="password" maxlength="200" :placeholder="$t('label.placeholderNewPwd')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('label.confirmPwd')" :label-width="editPwdLabelWidth" prop="confirmPwd">
          <el-input v-model.trim="editForm.confirmPwd" type="password" maxlength="200" :placeholder="$t('label.placeholderConfirmPwd')"></el-input>
        </el-form-item>
        <el-form-item :label-width="editformLabelWidth">
          <el-button size="mini" type="primary" @click="submitForm('editForm')" :loading="loading">{{$t('btnText.saveBtnText')}}</el-button>
          <!-- <el-button size="mini" type="primary"  @click="submitForm('editForm')" :loading="loading">{{$t('assetsAudit.reject')}}</el-button> -->
          <el-button size="mini" @click="isShowUpdatePwd = false" :loading="loading">{{ $t('btnText.cancelBtnText') }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>

</template>

<script>
import sysmenu from './components/sysmenu'
export default {
  name: 'App',
  data: function() {
    return {
      mainPageIcon: 'fa fa-home',
      loading: false, // 是否加载中
      isCollapse: false, // 是否收缩菜单栏
      rootMenu: [], // 菜单栏
      isShowUpdatePwd: false,
      editformLabelWidth: '120px', // 编辑面板标签宽度
      editPwdLabelWidth: '100px', // 编辑面板标签宽度
      editFormPosition: 'right', // top left right
      collClass: 'fa fa-angle-double-left', // 收缩按钮的图标样式
      tabItems: [], // tab页的数组
      menuList: [],
      selectTabName: '', // 当前被选择的tab页
      innerDivStyle: {
        height: 0,
        backgroundColor: 'black'
      },
      currentTab: null,
      editForm: {
        keyId: 0,
        version: 0,
        passWord: '',
        newPwd: '',
        confirmPwd: ''
      },
      // 编辑面板的验证规则
      editRules: {
        passWord: [
          {
            required: true,
            message: this.$i18n.t('rules.updatePwd.oldPwd'),
            trigger: 'blur'
          }
        ],
        newPwd: [
          {
            required: true,
            message: this.$i18n.t('rules.updatePwd.newPwd'),
            trigger: 'blur'
          }
        ],
        confirmPwd: [
          {
            required: true,
            message: this.$i18n.t('rules.updatePwd.confirmPwd'),
            trigger: 'blur'
          }
        ]
      },
      headersObj: {
        'Content-Type': 'application/json',
        'App-Type': this.getUserInfo().appType,
        Language: this.getUserInfo().language,
        Authorization: 'Bearer ' + this.getUserInfo().tokenCode,
        'X-AOHO-UserId': this.getUserInfo().keyID
      }
    }
  },
  methods: {
    // 显示密码框
    showUpdatePwd: function() {
      // this.$refs.editForm.resetFields();

      this.editForm.passWord = ''
      this.editForm.newPwd = ''
      this.editForm.confirmPwd = ''
      this.isShowUpdatePwd = true
      // console.log(this.$refs.eltabs);
      // alert(this.$refs.eltabs.$children[0].$el.offsetHeight);//clientHeight);

      // this.$refs.eltabs.$children[1].$el.height = (this.$store.state.tabHeight - 41) + "px";
      // alert(this.$refs.eltabs.$children[1].$el.offsetHeight);//clientHeight);
    },
    // 提交修改密码数据
    submitForm: function submitForm(formName) {
      if ((this.editForm.passWord != '') & (this.editForm.newPwd != '') & (this.editForm.confirmPwd != '')) {
        var old = this.editForm.passWord
        var newP = this.editForm.newPwd
        var confirm = this.editForm.confirmPwd
        if (old == newP) {
          this.$message({
            message: this.$i18n.t('message.updatePwdError1'),
            type: 'warning'
          })
          return
        }
        if (newP != confirm) {
          this.$message({
            message: this.$i18n.t('message.updatePwdError2'),
            type: 'warning'
          })
          return
        }
      }
      var _this = this
      this.$refs[formName].validate(function(valid) {
        if (valid) {
          _this.loading = true
          _this.procCommand(
            'UpdateUserpswdProc',
            'com.ispr.iptv.entity.sys.SysUser',
            'Default',
            _this.editForm,
            null,
            _this.submitFormCallback
          )
        } else {
          return false
        }
      })
    },
    // 执行命令后的回调函数
    submitFormCallback: function submitFormCallback(isSuccess, json) {
      this.loading = false
      if (isSuccess) {
        this.isShowUpdatePwd = false
        this.$message({
          message: this.$i18n.t('message.updatePwdTip'), // resource.message.successTip,
          type: 'success'
        })
        // this.queryTable();
        // 设置定时器
        window.setTimeout(this.logoff, 3000)
      } else {
        this.$message({
          message: json.msg,
          type: 'warning'
        })
      }
    },
    closeDialog: function() {
      this.$refs['editForm'].resetFields()
      this.loading = false
    },
    setCurTabName: function(menuCode, tabName) {
      alert(tabName)
    },

    // 根据菜单编码来查找菜单对象
    findSelectMenuObject: function(menuCode) {
      for (var i = 0; i < this.menuList.length; i++) {
        if (this.menuList[i].menuCode == menuCode) {
          return this.menuList[i]
        }
      }
      return null
    },
    // 点击菜单时的回调函数
    onMenuSelect: function(index, indexPath) {
      console.log(index)
      var tabItemsIndex = -1
      for (var i = 0; i < this.tabItems.length; i++) {
        if (this.tabItems[i].menuCode == index) {
          tabItemsIndex = i
          break
        }
      }
      // -1表示没有打开过该菜单
      if (tabItemsIndex != -1) {
        this.selectTabName = index
      } else {
        // this.readUserResource(this,index, this.setMenuSelect);
        var menuItem = null
        if (index == 'mainPage') {
          var menuItem = {
            menuCode: 'mainPage',
            menuName: this.$i18n.t('label.mainPage'),
            menuPath: 'home',
            component: null
          }
        } else {
          menuItem = this.findSelectMenuObject(index)
        }
        if (menuItem != null) {
          var tabItem = {
            menuCode: menuItem.menuCode,
            menuName: menuItem.menuName,
            menuPath: menuItem.menuPath
          }

          tabItem.component = this.findcomponentByName(tabItem.menuPath)
          if (tabItem.component != null) {
            this.tabItems.push(tabItem)
            this.selectTabName = tabItem.menuCode
          }

          // this.$router.push(tabItem.menuPath);
        }
        //  this.$refs.innTabItemPanel.offsetHeight = this.$refs.tabItemPanel.offsetHeight;
      }
    },

    // 点击菜单获取资源按钮权限后的回调
    setMenuSelect: function(isSuccess, json) {
      try {
        if (isSuccess) {
          // var menuItem = null;
          // if (json == "mainPage") {
          //     var menuItem = {
          //         menuCode: "mainPage",
          //         menuName: this.$i18n.t('label.mainPage'),
          //         menuPath: "home",
          //         component: null,
          //     };
          // } else {
          //     menuItem = this.findSelectMenuObject(json);
          // }
          // if (menuItem != null) {
          //     var tabItem = {
          //         menuCode: menuItem.menuCode,
          //         menuName: menuItem.menuName,
          //         menuPath: menuItem.menuPath
          //     };
          //     tabItem.component = this.findcomponentByName(tabItem.menuPath);
          //     if(tabItem.component != null)
          //     {
          //         this.tabItems.push(tabItem);
          //         this.selectTabName = tabItem.menuCode;
          //     }
          //     //this.$router.push(tabItem.menuPath);
          // }
          // this.$refs.innTabItemPanel.offsetHeight = this.$refs.tabItemPanel.offsetHeight;
        } else {
          this.$message.error(json.msg)
        }
      } catch (e) {
        alert(e)
      }
    },

    // 收缩菜单栏
    changeIsCollapse: function() {
      this.isCollapse = !this.isCollapse
      if (this.isCollapse == false) {
        // this.collClass = "fas fa-align-right";
        this.collClass = 'fa fa-angle-double-left'
      } else {
        // this.collClass = "fas fa-align-left";
        this.collClass = 'fa fa-angle-double-right'
      }
    },
    // 注销
    logoff: function() {
      // 清空cookies
      this.$cookies.remove(this.$appRuntime.cookiesSetting.name)

      var loginUrl = window.location.protocol + '//' + location.host + '/login.html'
      window.location.href = loginUrl
    },
    // 根据组件名称name来获得对应的路由组件
    findcomponentByName: function(name) {
      var componentList = this.$router.options.routes

      for (var i = 0; i < componentList.length; i++) {
        if (componentList[i].name == name) {
          return componentList[i].component
        }
      }
      return null
    },
    // 选中Tab时的回调函数
    selectTab: function(tabItem) {
      // alert(tabItem.menuPath);

      // this.$router.push(tabItem.menuPath);
      this.currentTab = tabItem
    },
    // 关闭Tab页面
    closePanel(){
      this.tabItems=[]
    },
    removeTab: function(targetName) {
      var index = -1
      for (var i = 0; i < this.tabItems.length; i++) {
        if (this.tabItems[i].menuCode == targetName) {
          index = i
          break
        }
      }
      if (index != -1) {
        this.tabItems.splice(index, 1)
        if (this.tabItems.length > 0) {
          this.selectTabName = this.tabItems[this.tabItems.length - 1].menuCode
        }
      }
    },
    // 创建菜单元素
    createMenuItem: function(rootMenu, menuList) {
      try {
        for (var i = 0; i < rootMenu.length; i++) {
          var menu = rootMenu[i]
          menu.childs = this.findByMenuCode(menuList, menu.menuCode)
          for (var j = 0; j < menu.childs.length; j++) {
            this.createMenuItem(menu.childs, menuList)
          }
        }
      } catch (e) {
        alert(e)
      }
    },
    // 根据菜单编码在指定的集合中查找子菜单
    findByMenuCode: function(menuList, menuCode) {
      var findArray = []
      for (var i = 0; i < menuList.length; i++) {
        var menu = menuList[i]
        if (menu.parentCode == menuCode) {
          findArray.push(menu)
        }
      }
      if (findArray.length > 0) {
        findArray.sort(function(menu1, menu2) {
          if (menu1.menuOrder < menu2.menuOrder) {
            return -1
          } else if (menu1.menuOrder > menu2.menuOrder) {
            return 1
          } else {
            return 0
          }
        })
      }
      return findArray
    },
    // 获得当前用户的所有菜单
    readUserMenu: function() {
      var curUserInfo = this.getUserInfo()
      var requestUserInfo = {
        tokenCode: curUserInfo.tokenCode,
        loginName: curUserInfo.loginName,
        groupCode: curUserInfo.groupCode,
        groupType: curUserInfo.groupType,
        language: curUserInfo.language
      }
      var _this = this
      this.axios
        .post('/api/QueryUserMenu', requestUserInfo, {
          headers: this.headersObj
        })
        .then(function(res) {
          var json = res.data
          // console.log(json.data)
          _this.menuList = json.data
          if (json.code == 'SUCCESS') {
            // alert(JSON.stringify(json));
            var resourceInfoTemp = _this.$store.getters.getAllResourceList
            for (var i = 0; i < json.data.length; i++) {
              var menu = json.data[i]
              menu['childs'] = []
              if (menu.parentCode == 'root') {
                _this.rootMenu.push(menu)
              } else {
                // 将按钮权限放到缓存中
                resourceInfoTemp.set(menu.menuCode, menu.children)
              }
            }

            _this.rootMenu.sort(function(menu1, menu2) {
              if (menu1.menuOrder < menu2.menuOrder) {
                return -1
              } else if (menu1.menuOrder > menu2.menuOrder) {
                return 1
              } else {
                return 0
              }
            })

            _this.createMenuItem(_this.rootMenu, json.data)
            _this.initHomePage()
          } else {
            _this.$message({
              message:json.msg,
              type: 'warning'
            })
          }
        })
        .catch(function(error) {
          console.log(error)
          _this.$message({
            message: _this.$i18n.t('errorCode.serverError'),
            type: 'warning'
          })
        })
    },
    initHomePage: function() {
      var mainTabItem = {
        menuCode: 'mainPage',
        menuName: this.$i18n.t('label.mainPage'),
        menuPath: 'home',
        component: null
      }
      mainTabItem.component = this.findcomponentByName(mainTabItem.menuPath)
      // this.tabItems.push(mainTabItem);
      // this.selectTabName = mainTabItem.menuCode;
    }
  },
  components: {
    'sys-menu': sysmenu
  },
  mounted: function mounted() {
    document.title = this.$i18n.t('label.sysName')
    this.readUserMenu()

    this.$store.commit('setTabHeight', this.$refs.tabItemPanel.offsetHeight)
    // this.$store.commit('setTabHeight',this.$el.offsetHeight - 50 - 20);
    // alert(this.$refs.tabItemPanel.offsetHeight);
    // alert(this.$el.offsetHeight - 50);
    // console.log(this.$refs.eltabs);
    // alert(this.$store.state.tabHeight);
    // this.innerDivStyle.height = this.$store.state.tabHeight - 41;
    // this.$refs.innTabItemPanel.offsetHeight = this.$refs.tabItemPanel.offsetHeight;
    var g=this
    document.onkeydown=function(e){
      let key=e.keyCode
      if(key==13){
        e.preventDefault()
        e.stopPropagation()
        var ref=g.$refs[g.selectTabName]
        if(ref&&ref[0]&&ref[0].enterDown){
          ref[0].enterDown()
        }
      }
    }
  }
}
</script>

<style scoped>
#app {
  margin: 0;
  height: 100%;
}
#logo {
  float: left;
  width: 220px;
  background-image: url(assets/logo_blue.png);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  background-size: 100%;
  background-color: #3d7acd;
  /* 黑色版本，备份用 */
  /* background: dimgray; */
  height: 68px;
  transition: width 0.3s ease;

  /* margin-top: 20px; */
  /* border-right: 1px solid rgba(229, 232, 235, 0.1); */
}
.head {
  overflow: hidden;
}
.container {
  display: flex;
}
#headPanel {
  float: left;
  height: 68px;
  line-height: 68px;
  text-align: center;
  color: #fff;
  width: calc(100% - 220px);
  /* border-bottom:3px solid #eeeeee; */
  /* margin-bottom: 7px; */
  /* background: linear-gradient(to right, #0068cb, #16bfed); */
  background: linear-gradient(to right, #3d7acd, #84b8ff);
  /* 黑色版本，备份用 */
  /* background: dimgray; */
  transition: width 0.3s ease;
}
#headPanel.collapseMain {
  width: 100%;
}
#logo.collapseMain {
  width: 0;
}
#mainPanel {
  float: left;
  /* margin-left: 220px; */
  height: 100%;
  background-color: #fff;
  width: calc(100% - 220px);
  transition: width 0.3s ease;
}
#mainPanel.collapseMain {
  /* margin-left: 64px; */
  width: calc(100% - 64px);
}
#navPanel {
  height: 100%;
  /* 样式修改标记开始 */
  /* background-color:#006b9d; */
  float: left;
  margin-right: 0px;
  /* padding-top: 68px; */
  width: 220px;
  overflow: hidden;
  transition: width 0.3s ease;
}
#navPanel.collapseMain {
  width: 64px;
}
#menuPanel {
  /* 样式修改标记开始 */
  max-width: 220px;
  overflow: hidden;
  /* background-color:#006b9d; */
}

#tabPanel {
  height: calc(100vh - 68px);
  margin: 0px;
  float: none;
  width: 100%;
  background-color: #fff;
  position: relative;
}
.panel-close{
  position: absolute;
  top:0;
  right:0;
  width: 40px;
  height: 40px;
  font-size:20px;
  line-height: 40px;
  cursor: pointer;
  z-index: 5;
  text-align: center;
}

.el-menu-vertical:not(.el-menu--collapse) {
  width: 240px;
  /* 样式修改标记开始 */
  /* background-color: #006b9d !important;  菜单栏空白的背景色 */
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

/*tab页样式*/

.el-tabs--card > .el-tabs__header {
  border-bottom: 0px solid #409eff !important;
  /*background-color: #ecf5ff !important; */
  /* tab头空白区域的底色*/
  background-color: #fff !important;
  /* tab头空白区域的底色*/
}

.el-tabs__content {
  overflow: hidden;
  position: relative;
  /* height: calc(100% - 44px); */
  background-color: #fff;
}

.el-tabs__item {
  margin: 0px;
  height: 30px !important;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 30px !important;
  display: inline-block;
  list-style: none;
  font-size: 12px !important;
  /* border-left: 1px solid #eeeeee !important; */
  border-right: 2px solid #eeeeee !important;
  border-radius: 0px !important;
  color: #666666;
  /*border-bottom: 1px solid #409eff !important;*/
  /*border-left: 1px solid #409eff !important;*/
  position: relative;
}

.el-tabs__nav-scroll {
  /*border: 1px solid #409eff !important;*/
  box-shadow: 0px 2px 3px #eeeeee !important;
  padding-bottom: 5px;
  margin-bottom: 3px;
}

.el-tabs--card > .el-tabs__header .el-tabs__nav {
  /*border: 0px solid #409eff !important;*/
  /* 未激活的tab页边框*/
  /*border-bottom: 0px solid #409eff !important;
        border-radius: 4px 4px 0 0 !important;*/
  border: 0px solid #409eff !important;
}

.el-tabs--card > .el-tabs__header .el-tabs__item {
  /*border-left: 0px solid #409eff !important;*/
  font-size: 12px !important;
  color: #333333 !important;
  background-color: #fff !important;
  /* 未激活的tab页底色 以及文字颜色*/
}

/* 激活的tab页左右的内部丁 和底色 以及文字颜色*/

.el-tabs--card > .el-tabs__header .el-tabs__item.is-active.is-closable {
  padding-left: 15px;
  padding-right: 15px;
  font-size: 12px !important;
  color: #666666 !important;
  border-bottom: 3px solid #014b6e;
  /*font-weight: 700 !important;*/
  background-color: #fff !important;
  /*background: -webkit-linear-gradient(270deg,#6a7ec1,#2d5f8b);
            background: -o-linear-gradient(270deg,#6a7ec1,#2d5f8b);
            background: -moz-linear-gradient(270deg,#6a7ec1,#2d5f8b);
            background: linear-gradient(270deg #6a7ec1,#2d5f8b);*/
  /*background-image: url(images/shadow.png);
            background-position: left top;
            background-repeat:repeat-x repeat-y;*/
}

.el-tabs__header {
  padding: 0;
  position: relative;
  margin: 0 0 3px !important;
}

/* 未激活的tab页鼠标进入时的底色 以及文字颜色*/

.el-tabs--card > .el-tabs__header .el-tabs__item.is-closable:hover {
  padding-left: 15px !important;
  padding-right: 15px !important;
  font-size: 12px !important;
  background-color: #fff !important;
  color: #666666 !important;
  border-bottom: 3px solid #014b6e;
}
</style>
<style>
.main-tabs>.el-tabs__header{
  padding-right:40px;
}
</style>